<template>
	<div id="orderSearchDiv">

		<div id="form1" style="">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()"
				id="orderSearchForm">
				<div class="toptitle">
					<el-form-item label="用户昵称">
						<br> <br>
						<el-input v-model="formInline.memberName" placeholder></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<br> <br>
						<el-input v-model="formInline.memberPhone" placeholder></el-input>
					</el-form-item>

					<el-form-item label="领取状态">
						<br> <br>
						<el-select v-model="formInline.isReceive">
							<el-option label="全部" value=""></el-option>
							<el-option label="未确认" value="0"></el-option>
							<el-option label="已确认" value="1"></el-option>
                           	<el-option label="已结束" value="2"></el-option>
							<el-option label="已配送" value="3"></el-option>
						
						</el-select>
					</el-form-item>

					
					<el-form-item label="奖品等级">
						<br> <br>
						<el-select v-model="formInline.lotteryLevel">
							<!-- <el-option label="全部" value=""></el-option>
							<el-option label="谢谢参与" value="谢谢参与"></el-option>
							<el-option label="一等奖" value="一等奖"></el-option>
							<el-option label="二等奖" value="二等奖"></el-option>
							<el-option label="三等奖" value="三等奖"></el-option>
							<el-option label="四等奖" value="四等奖"></el-option>
							<el-option label="五等奖" value="五等奖"></el-option> -->
							          <el-option
            v-for="item in lotteryLevelList"
            :key="item.prizeLevelName"
            :label="item.prizeLevelName"
            :value="item.prizeLevelName"
          ></el-option>

						</el-select>
					</el-form-item>
					<el-form-item label="奖品名称">
						<br> <br>
						<el-input v-model="formInline.lotteryProductName" placeholder></el-input>
					</el-form-item>
						<el-form-item label="所属专卖店">
						<br> <br>
						<el-input v-model="formInline.orgName" placeholder></el-input>
					</el-form-item>

				</div>

				<div class="toptitle">

				

					<el-form-item label="收货方式">
						<br> <br>
						<el-select v-model="formInline.memberPstype">
							<el-option label="全部" value=""></el-option>
							<el-option label="商家配送" value="1"></el-option>
							<el-option label="到店自提" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="配送状态">
						<br> <br>
						<el-select v-model="formInline.isSend">
							<el-option label="全部" value="0"></el-option>
							<el-option label="未配送" value="2"></el-option>
							<el-option label="已配送" value="1"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="店铺授权码">
						<br> <br>
						<el-input v-model="formInline.custCode" placeholder></el-input>
					</el-form-item>

					<el-form-item label="经销商名称">
						<br> <br>
						<el-input v-model="formInline.custName" placeholder></el-input>
					</el-form-item>
					<el-form-item label="抽奖时间">
						<br> <br>
						<el-date-picker v-model="formInline.payDateRange" type="datetimerange" align="right"
							style="width:400px" unlink-panels range-separator="-" start-placeholder="开始日期"
							end-placeholder="结束日期"    format="yyyy-MM-dd HH:mm:ss"
                                                value-format="yyyy-MM-dd HH:mm:ss" >
						</el-date-picker>

						
					</el-form-item>

				</div>

				<!-- <div
          class="toptitle"
          style="display: flex;
        margin-left: 3.5%;
    justify-content: flex-start;"
        >

          
  </div> -->
			</el-form>
		</div>
		<div id="multiBtnDiv" style="display:block;text-align:right;margin:20px 0">
			<!-- <el-button
                          @click="isActive = !isActive"
                          type="primary"
                          size="mini"
                          v-if="!isActive"
                        >筛选条件展开</el-button>
                          <el-button
                            @click="isActive = !isActive"
                            type="primary"
                            size="mini"
                            v-if="isActive"
                          >筛选条件折叠</el-button> -->
			<el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
			<el-button type="primary" @click="qingkong()" size="mini" icon="el-icon-delete">清空</el-button>
				<el-button @click="exportExcel" style="margin-top: 0px;" size="mini" type="success"
					icon="el-icon-s-data" :loading="exportLoading">导出</el-button>
			<el-button type="primary" @click="goback()" size="mini">返回</el-button>
		</div>

		<div class="table1">
			<el-table id="rebateSetTable" ref="table1" height="500px" key="table1" tooltip-effect="dark"
				v-loading="loading" :data="tableData" border
				:header-cell-style="{background:'#eef1f6',color:'#606266'}">
				<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>

				<el-table-column prop="memberName" label="用户昵称" align="center" width="120"></el-table-column>

				<el-table-column prop="memberPhone" label="用户手机号" align="center" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="lotteryProductName" label="奖品名称" align="center" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="lotteryLevel" label="奖品等级" align="left" show-overflow-tooltip></el-table-column>
				<el-table-column prop="custCode" label="店铺授权码" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="custName" label="经销商名称" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="orgName" label="所属专卖店" align="center" show-overflow-tooltip></el-table-column>

				<el-table-column prop="memberPstype" label="收货方式" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.memberPstype===1">商家配送</span>
						<span v-if="scope.row.memberPstype===2">到店自提</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="receiveName" label="领取人姓名" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="receivePhone" label="领取人联系方式" width="120" align="center" show-overflow-tooltip></el-table-column>


				<!-- 0未确认 1已确认 2已过期 3已配送 -->
				<el-table-column prop="isReceive" label="领取状态" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.isReceive===0">未确认</span>
						<span v-if="scope.row.isReceive===1">已确认</span>
						<span v-if="scope.row.isReceive===2">已结束</span>
						<span v-if="scope.row.isReceive===3">已配送</span>
					</template>
				</el-table-column>

				<el-table-column prop="" label="收货地址" align="center" show-overflow-tooltip>
                	<template slot-scope="scope">
					{{scope.row.position||''}}{{scope.row.address||''}}
					</template>

				</el-table-column>
				<el-table-column prop="isReceive" label="配送状态" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.isReceive==3">已配送</span>
						<span v-if="scope.row.isReceive!==3&&scope.row.isReceive===1">未配送</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderNo" label="订单编号" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updateTime" label="抽奖时间" width="200" align="center" show-overflow-tooltip>
				</el-table-column>

			</el-table>
			<el-form :inline="true" :model="formInline">
				<el-form-item style="margin-top: 0px;"></el-form-item>
			</el-form>
			<div class="block" style="margin-top:-22px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:disabled="dindanflag" :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
					:current-page="listQuery.current" :page-size="listQuery.size"
					layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
			</div>
		</div>

		<!--列表配置-->

	</div>
</template>

<script>
	// import Sortable from "sortablejs";
	// import { getmemberrule } from "@/api/membergrade";
	// import collapse from "@/utils/collapse.js";
	import {
		qryActivityLottery,toExcelJoinStore,getlotteryLevelList
	} from "@/api/presaleOrderSearch";

	import qs from "qs";
	import FileSaver from "file-saver";
	import XLSX from "xlsx";

	const curDateStr = function() {
		var curDate = new Date();
		var year = curDate.getFullYear();
		var month = curDate.getMonth() + 1;
		month = month > 9 ? month : "0" + month;
		var date = curDate.getDate();
		date = date > 9 ? date : "0" + date;
		return year + "-" + month + "-" + date;
	};
	export default {
		data() {
			return {
				lotteryLevelList:[],
				logininfo: "",
				orgSeq: "",
				dindanflag: false,
				dindanflagone: false,
				orgType: "",
				loading: false,
				exportLoading: false,
				warzoneList: [],
				insertLoading: false,
				goodsPicDialoVisible: false,
				activityIdList: [],
				isActive: true,
				dialogVisibleImg: false,
				dialogImageUrl: "",
				picList: [],
				dataViewDate: "1",
				dataViewRange: "",
				totalData: {
					orderNum: 0,
					orderMoney: 0,
					noPayNum: 0,
					noPayMoney: 0,
					payNum: 0,
					payMoney: 0,
					returnNum: 0,
					returnMoney: 0
				},
			
				gradelevelOptions: [], //会员等级
				formInline: {
					memberName: "",
					memberPhone: "",
					isReceive: "",
					lotteryLevel: "",
					lotteryProductName: "",
					orgName: "",
					memberPstype: "",
					isSend: "",
                  payDateRange:[],
					custCode: "",
					custName: ""
				},
				allCol: [],
				col: [],
				dropCol: [],
				expandRowKeys: [],
				tableData: [], //订单列表数据
				tableDataExcel: [], //导出数据
				payData: [], //支付列表数据
				itemData: [], //商品列表数据
				total: 0,
				listQuery: {
					current: 1,
					size: 100
				},
				sort: "",
				order: "",
				configTableDialogVisible: false, //列表配置弹窗状态
				formInline2: {
					isIndeterminate: false, //是否半选中
					isAll: true, //是否全部显示,
					menuCode: "normalOrderSearch"
				},
				userMenuFieldList: [], //全部列名列表
				userMenuAllFields: [], //全部的列名
				userMenuShowFields: [], //显示的列名
				userOldMenuShowFields: [], //原显示的列名
				pickerOptions: {}
			};
		},

		mounted() {
			this.qryActivityLottery();
			this.getlotteryLevelList()
		},
		filters: {
			numFilter(value) {
				let realVal = "";
				if (!isNaN(value) && value !== "") {
					// 截取当前数据到小数点后2位
					realVal = parseFloat(value).toFixed(2);
				} else {
					realVal = "--";
				}
				return realVal;
			}
		},
		methods: {
			exportExcel() {
				this.exportLoading = true;
				let lotteryBeginDate = "";
				let lotteryEndDate = "";
				if (
					this.formInline.payDateRange != null &&
					this.formInline.payDateRange.length == 2
				) {
					lotteryBeginDate = this.formInline.payDateRange[0];
					lotteryEndDate = this.formInline.payDateRange[1];
				} else {
					this.formInline.payDateRange = "";
				}
				let data = {
					size: 9999,
					current: 1,
					condition: {
					type: 1,
						activityId: this.$route.params.listactiveId,
						memberName: this.formInline.memberName,
						memberPhone: this.formInline.memberPhone.trim(),
						isReceive: this.formInline.isReceive,

						lotteryBeginDate: lotteryBeginDate,
						lotteryEndDate: lotteryEndDate,
						lotteryLevel: this.formInline.lotteryLevel,

						lotteryProductName: this.formInline.lotteryProductName.trim(),
						orgName: this.formInline.orgName,
						memberPstype: this.formInline.memberPstype,
						isSend: this.formInline.isSend,
						custCode: this.formInline.custCode,
						custName: this.formInline.custName
					},
					ascs: [],
					descs: []
				};
				toExcelJoinStore(data)
					.then(res => {
						this.exportLoading = false;
						const link = document.createElement("a");
						let blob = new Blob([res], {
							type: "application/vnd.ms-excel"
						});
						link.style.display = "none";
						//设置连接
						link.href = URL.createObjectURL(blob);
						link.download = "抽奖记录列表.xlsx";
						document.body.appendChild(link);
						//模拟点击事件
						link.click();
					})
					.catch(err => {
						this.exportLoading = false;
						console.log(err);
					});
			},
			goback() {
				this.$router.go(-1);
			},
			getreturnStatus(v) {
				console.log(v);
				if (v == "1") {
					this.formInline.orderStatus = "3";
					console.log(this.formInline.orderStatus);
				}
			},

			/*订单列表*/
			qryActivityLottery() {
				let lotteryBeginDate = "";
				let lotteryEndDate = "";
				if (
					this.formInline.payDateRange != null &&
					this.formInline.payDateRange.length == 2
				) {
					lotteryBeginDate = this.formInline.payDateRange[0];
					lotteryEndDate = this.formInline.payDateRange[1];
				} else {
					this.formInline.payDateRange = "";
				}

				let data = {
					current: this.listQuery.current,
					size: this.listQuery.size,
					condition: {
						type: 1,
						activityId: this.$route.params.listactiveId,
						memberName: this.formInline.memberName,
						memberPhone: this.formInline.memberPhone.trim(),
						isReceive: this.formInline.isReceive,

						lotteryBeginDate: lotteryBeginDate,
						lotteryEndDate: lotteryEndDate,
						lotteryLevel: this.formInline.lotteryLevel,

						lotteryProductName: this.formInline.lotteryProductName.trim(),
						orgName: this.formInline.orgName,
						memberPstype: this.formInline.memberPstype,
						isSend: this.formInline.isSend,
						custCode: this.formInline.custCode,
						custName: this.formInline.custName
					},
					ascs: [],
					descs: []
				};

				qryActivityLottery(data).then(res => {
					// this.dindanflag = false;
					// this.dindanflagone = false;
					this.loading = false;
					this.tableData = res.records;
					this.total = res.total;
				});
			},

	
			getlotteryLevelList() {
			
				let data = {
				activityId:this.$route.params.listactiveId
				};

				getlotteryLevelList(data).then(res => {
					
					this.lotteryLevelList = res.records;
					
					this.lotteryLevelList.unshift({
						"prizeLevelName":"全部",
                         "prizeLevel":"",
					});
				 console.log(res.records,this.lotteryLevelList)
				});
			},
			handleSizeChange(val) {
				this.listQuery.size = val;

				this.qryActivityLottery();
			},
			handleCurrentChange(val) {
				this.listQuery.current = val;
				this.dindanflag = true;
				this.qryActivityLottery();
			},
			//查询
			search() {
				this.listQuery.current = 1;
				this.dindanflagone = true;
				this.qryActivityLottery();
			},
			//清空
			qingkong() {
				(this.formInline.memberName = ""),
				(this.formInline.payBeginDate = []),
				(this.formInline.memberPhone = ""),
				(this.formInline.lotteryLevel = ""),
				(this.formInline.isReceive = ""),
				(this.formInline.lotteryProductName = ""),
				(this.formInline.memberPstype = ""),
				(this.formInline.isSend = ""),
				(this.formInline.custCode = ""),
				(this.formInline.custName = "");
				
                    (this.formInline.payDateRange =[]);             
				this.formInline.orgName = "";

				this.qryActivityLottery();
			}
		},
		//其他
		computed: {}
	};
</script>
<style scoped>
	.el-form--inline /deep/ .el-form-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.el-form-item /deep/ .el-form-item__content {
		line-height: 10px !important;
	}

	.toptitle {
		display: flex;
		/* justify-content: space-around; */
	}

	.toptitle .el-form-item {
		margin-right: 25px;
	}

	#orderSearchDiv /deep/ .el-radio-button-inner-datepicker .el-radio-button__inner {
		padding: 0;
	}

	#orderSearchDiv /deep/ .el-radio-button-inner-datepicker .el-input__inner {
		border: none;
		height: 38px;
	}

	#orderSearchDiv /deep/ .el-form--inline .el-form-item__content {
		width: 180px;
	}

	#orderSearchDiv /deep/ .el-range-editor.el-input__inner {
		width: 250px;
	}

	#orderSearchDiv /deep/ .el-dialog__body {
		padding-top: 0;
	}

	#order_total_flex {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	#order_total_flex /deep/ .order_content {
		cursor: pointer;
		/* width: 200px; */
		padding: 20px;
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	#order_total_flex /deep/ .order_detail {
		width: 200px;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	#order_total_flex /deep/ .order_content2 {
		width: 60px;
		cursor: pointer;
		padding: 10px 0;
		margin: 0 1px;
		text-align: center;
		overflow: hidden;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	#order_total_flex /deep/ .order_content .order_total_title {
		color: #000;
	}

	#order_total_flex /deep/ .order_content .order_total_info {
		margin-top: 10px;
	}

	#order_total_flex /deep/ .order_content .order_data {
		font-size: 1.4em;
		font-weight: bold;
	}

	#configTableDiv /deep/ .el-divider--horizontal {
		margin-top: 0;
	}

	.line_line {
		border-left: 5px solid #dddddd;
		display: inline-block;
		height: 6.25rem;
		margin-left: -1px;
		padding: 0px 0px 0px 3px;
	}
</style>
